<template>
    <div class="content">
        <h3><slot /></h3>
        <div class="betwe">
            <template v-for="(v,i) in value">
                <ipt :key="i" v-model="value[i]" @change="Format" />{{ i==value.length-1?'':'~' }}
            </template>
        </div>
        <div class="tips betwe">
            <span v-for="(v,i) in value" :key="i">
                {{ title + (i+1) }}: {{ v }}-{{ (value[i+1] -1) || '以上' }}
            </span>
        </div>
    </div>
</template>

<script>
export default {
    components: {
    },
    props: {
        value: {
            default: () => [0, 0, 0, 0, 0]
        }
    },
    data () {
        return {
        }
    },
    computed: {
        ready () {
            return [...new Set(this.value)].length > 4
        },
        title () {
            return this.$slots.default[0].text.substr(0, 1)
        }
    },
    watch: {
    },
    created () {
    },
    mounted () {

    },
    methods: {
        Format () {
            if (this.ready) {
                this.value.sort((a, b) => a - b)
            }
        }
    }
}
</script>

<style scoped lang="stylus">
@import '../styl/public.styl'
.tips
    margin-top 20px
    span
        display inline-block
        padding 7px 20px
        background #f9f9f9
        border-radius 20px
</style>
